<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <h1>axios请求方法别名</h1>
    <button id="btn">发送请求</button>
    <script>
        const myAxios = axios.create({
            baseURL:"/", //配置请求的基础路径
            timeout:10000, //配置请求的超时时间
            headers:{}  //配置请求的头部
        })
        // 请求拦截器
        /*
        use方法接受两个回调函数，正常都会进入到第一个回调函数中
        只有以下两种情况会触发异常处理的回调（了解）：
            -use额外配置第三个参数options
            -当同时设置多个同类型拦截器的时候，如果第二个拦截器中的处理出现错误，则会执行第一个拦截器中的异常处理函数
        */ 
        myAxios.interceptors.request.use((config)=>{
            // console.log(config);
            // 在请求拦截器中可以拿到axios的配置对象，配置对象中config.headers.common是请求头的配置
            alert("请求拦截器");
            // 最后一定要把config返回出去，否则请求不会发送
            return config;
        },(err)=>{
            return Promise.reject(err.message);
        });

        const oBtn = document.getElementById('btn');
        oBtn.onclick = async function(){
            const result = await myAxios.get("/user",{
                params:{
                    userId:"001"
                }
            })
            console.log(result,"result");
        }
    </script>
</body>
</html>